<template>
	<view class="container">
		<view class="top">
			<p>
				<span>我的</span>
				<span class="dian" @click="layout">···</span>
			</p>
		</view>
		<view class="con">
			<view class="tp">
				<view class="yuan"></view>
				<view class="login">
					<view class="p1">
						<span @click="login">{{token ? username : '立即登录'}}</span><br/>
						<span>登录了解更多功能</span>
					</view>
					<p class="iconfont icon-fenlei" v-if="!flag" @click="click"></p>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="tu1">
				<p class="iconfont icon-dingdan-"></p>
				<p class="text">订单</p>
			</view>
			<view class="tu2">
				<p class="iconfont icon-xiaoxi"></p>
				<p class="text">消息</p>
			</view>
			<view class="tu3">
				<p class="iconfont icon-shoucang"></p>
				<p class="text">收藏</p>
			</view>
			<view class="tu4">
				<p class="iconfont icon-qianzaixueyuan"></p>
				<p class="text">在学</p>
			</view>
		</view>
		<view class="bot">
			<view class="bot1">
					<view class="name">
						<span class="iconfont icon-wodeyouhuiquan"></span>
						<span>我的优惠券</span>
					</view>
					<view class="icon">></view>	
			</view>
			<view class="bot1 bot2">
				<view class="name">
					<span class="iconfont icon-changjianwentixiangguanwenti"></span>
					<span>常见问题</span>
				</view>
				<view class="icon">></view>	
			</view>
			<view class="bot1 bot3">
				<view class="name">
					<span class="iconfont icon-fenlei"></span>
					<span>设置</span>
				</view>
				<view class="icon">></view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true,
				// token: uni.getStorageSync('token'),
				// username:uni.getStorageSync('username')
				username:'',
				token:''
			};
		},
		methods:{
			//跳转
			click(){
				uni.navigateTo({
					url:"/pages/user-info/user-info"
				})
			},
			// 跳转登录
			login(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			//跳转设置
			layout(){
				uni.navigateTo({
					url:'/pages/layout/layout'
				})
			}
		},
		onLoad() {
			this.username=uni.getStorageSync('username')
			this.token=uni.getStorageSync('token')
			
		},
		onShow() {
			this.username=uni.getStorageSync('username')
            this.token=uni.getStorageSync('token')
			if(this.token){
				this.flag=false
			}
		}
	}
</script>

<style lang="scss">
	.top{
		width: 100%;
		height: 100rpx;
		background-color: rgb(92, 204, 132);
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 40rpx;
		p{
			width: 100%;
			:nth-child(1){
				margin-left: 80rpx;
			}
			.dian{
				padding-right: 20rpx;
				float: right;
				font-size: 60rpx;
			}
		}
	}
	.con{
		width: 100%;
		height: 380rpx;
		background-color: rgb(92, 204, 132);
		border-bottom-left-radius: 20%;
		border-bottom-right-radius: 20%;
		.tp{
			padding: 30rpx;
			display: flex;
			align-items: center;
			color: #fff;
			.yuan{
					width: 150rpx;
					height: 150rpx;
					background-color: #fff;
					border-radius: 50%;
			}
			.login{
				flex:1;
				padding: 0 0 0 30rpx;
				display: flex;
				justify-content: space-between;
				
			}
		}
	}
	.center{
		width: 690rpx;
		height: 150rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		margin: 30rpx;
		margin-top: -140rpx;
		display: flex;
		justify-content: space-evenly;
		text-align: center;
		align-items: center;
		.iconfont{
			font-size: 50rpx;
			color: rgb(254, 189, 0);
		}
	}
	.bot{
		width: 100%;
		height: 300rpx;
		.bot1{
			height: 100rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.iconfont{
				font-size: 50rpx;
				color: skyblue;
			}
			.name{
				display: flex;
				justify-content: center;
				align-items: center;
				:nth-child(2){
					margin-left: 20rpx;
				}
			}
			.icon{
				color: #ccc;
				font-size: 40rpx;
			}
		}
		.bot3{
			border: none;
		}
		
	}
</style>
